<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>

<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<div id="Page-content">
	<!-- ============== BANNER ================== -->

	<div id="banner">
		<div class="marquee_container autoplay">
			<div class="marquee_photos"></div>
			<div class="marquee_caption">
				<div class="marquee_caption_content"></div>
			</div>
			<div class="marquee_nav"></div>
		</div>
		<div class="marquee_panels">
		
			<s:iterator value="#request.banner">
				<!-- Panel -->
				<div class="marquee_panel" style="">
					<img class="marquee_panel_photo" src="<s:property value="getImageBanner()" />"
						width="700" height="300" />
					<div class="marquee_panel_caption">
						<a href="#"><s:property value="getName()" /></a><br /> <br /> <br /> <br /> <br />
					</div>
				</div>
			</s:iterator>
		</div>
	</div>
	<br />
	<!-- ============== CONTENT CHILD ================== -->
	<div id="content">
		
		<h2 style="font-size: 20px; font-weight: normal">This Week's
			Offers</h2>
		<hr class="line" />
		<span style="float: right; font-size: 10px;"><a
			href="<s:url value="viewalloffer" />" style="text-decoration: none">See
				more cell phones offers &gt</a></span> <br />

		<s:iterator value="#request.offers">
			<div class="product">
				<div class="picture">
					<a href="#"><img src="<s:property value="getImageUrl()" />"
						width="125" height="80" /></a>
				</div>
				<div class="name">
					<a href="#"><s:property value="getName()" /></a>
				</div>
				<div class="description">
					<s:property value="getDescription()" />
				</div>
				<div class="extra"></div>
			</div>
		</s:iterator>

		<!-- ============== BEST SELLING ================== -->
		<h2 style="clear: both; font-weight: normal; font-size: 20px">Best-Selling
			Cell Phones with Plans</h2>
		<hr class="line" />
		<div class="content-box">
			<div style="float: right; font-size: 10px;">
				<a href="category.action?idCategory=C1001"
					style="text-decoration: none">Shop all Cell Phones ></a>
			</div>
			<br /> <br />
			<div class="side-full">
				<!-- More Products -->
				<div class="more-products">

					<div class="more-products-holder">
						<ul>

							<s:iterator value="#request.products">
								<li><a
									href="<s:url action="detailproduct.action"><s:param name="sku" value="getSku()" /></s:url>">
										<img
										src=" <s:property value="getProductImages().iterator().next().getImageUrl()"/> "
										width="80" height="80" alt="anh_minh_hoa" />
								</a>
									<div class="item-name">
										<a
											href="<s:url action="detailproduct.action"><s:param name="sku" value="getSku()" /></s:url>">
											<s:property value="getName()" />
										</a>
									</div>
									<div class="item-model">
										Model:
										<s:property value="getModel()" />
									</div>
									<div class="item-sku">
										SKU:
										<s:property value="getSku()" />
									</div> <img src="images/rate_<s:property value="getRate()"/>.jpg" />
									<div class="item-price">
										Price: $
										<s:property value="getPrice()" />
									</div></li>
							</s:iterator>

						</ul>
					</div>

					<div class="more-nav">
						<a href="#" class="prev">previous</a> <a href="#" class="next">next</a>
					</div>
				</div>
				<!-- End More Products -->
				<!-- Text Cols -->
				<div class="cols"></div>
				<!-- End Text Cols -->
			</div>
		</div>
		<div class="clearer"></div>
	</div>
	<!-- ========RIGHT SIDEBAR =================-->
	<div id="right-sidebar">
		<div class="show-box-right">
			<div class="title-box">Shop by carrier</div>
			<div class="picture">
				<ul>
					<s:iterator value="#request.lstCarrier">
						<s:if test="%{getUrlimage() != null &&  getUrlimage() != ''}">
							<li><a href=""><img src="<s:property value="getUrlimage()"/>" width="100" height="100" /></a></li>
						</s:if>
					</s:iterator>
				</ul>
			</div>
		</div>
		<audio src="music/Happy_New_Year.mp3" controls autoplay loop style="width:200px">
			<p>
				Your browser does not support native audio. To listen, please <a
					href="music/Happy_New_Year.mp3">download</a> the mp3 file to your
				computer.
			</p>
		</audio>
	</div>
</div>